<!-- 购物车页面 -->
<template>
  <div>
    <ul>
      <van-swipe-cell v-for="item in cartList" :key="item.id">
        <li style="height: 50px">
          <van-checkbox v-model="item.checked">
            {{ item.goods_name }} --{{ item.retail_price }} -- {{ item.number }}
          </van-checkbox>
        </li>
        <template #right>
          <van-button
            @click="deleteCartItemById(item.id)"
            square
            type="danger"
            text="删除"
          />
        </template>
      </van-swipe-cell>
    </ul>

    <van-checkbox v-model="allChecked"> 全选 </van-checkbox>
    <div>总价：{{ totalPrice }}</div>
    <van-button type="danger" @click="submitOrder">下单</van-button>
  </div>
</template>

<script>
import { 
  cartList as cartListApi,
  deleteAction as deleteActionApi,
 } from '@/api/cart'
 import {
  submitAction as submitActionApi
 } from '@/api/goodsDetail'
import { Dialog } from 'vant'
import Vue from 'vue'
export default {
  name: 'Cart',
  data() {
    return {
      checked: true,
      cartList: []
    }
  },

  components: {},

  computed: {
    // 计算属性 默认是get
    // allChecked(){
    //   // every 所有的都满足条件 返回 true ，否则返回 false
    //   return this.cartList.every(item=>item.checked)
    // }
    allChecked: {
      get() {
        return this.cartList.every((item) => item.checked)
      },
      set(val) {
        // console.log(val);
        // if(val){
        //   this.cartList.forEach(item=>item.checked=true)
        // }else{
        //    this.cartList.forEach(item=>item.checked=false)
        // }
        this.cartList.forEach((item) => (item.checked = val))
      }
    },
    totalPrice() {
      return this.cartList.reduce((total, current) => {
        if (current.checked) {
          return total + current.retail_price * current.number
        } else {
          return total
        }
      }, 0)
    }
  },

  created() {
    this.getCartList()
  },

  mounted() {},

  methods: {
    async getCartList() {
      let res = await cartListApi({ openId: localStorage.getItem('openId') })
      // 给每一个购物车数据动态一个checked 属性
      // 判断是否选中
      // res.data.forEach(item => {
      //   item.checked = false
      // });
      this.cartList = res.data
      /*  // 先赋值，后 动态添加属性 是错误的写法
      // this.cartList.forEach(item=>{
      //    item.checked = false
      // }) */

      this.cartList.forEach((item) => {
        // set 方法设置的属性是响应性的
        Vue.set(item, 'checked', false)
      })
    },
    // 删除购物车里的某一项
    deleteCartItemById(id) {
      var _this = this
      // 弹框
      Dialog.confirm({
        title: '标题',
        message: '弹窗内容'
      })
        .then( async () => {
          // 点击确定按钮了
          let res = await deleteActionApi({id})
          if(res.data){ //删除成功
            // 刷新数据
            _this.getCartList()
          }
        })
        .catch(() => {
          // 点击取消按钮了
          console.log('点击取消按钮了');
        })
    },
    // 下单
    async submitOrder(){
      // 判断是否选中商品了
      let isHasSelected = this.cartList.some(item=>item.checked)
      if(isHasSelected){
        console.log("有选中的商品");
        // let checkedArr = this.cartList.filter(item=>item.checked)
        // console.log(checkedArr);
        // let goods_id_arr = checkedArr.map(item=>item.goods_id)
        // console.log(goods_id_arr.join(','));
        let res = await submitActionApi({
          allPrise:this.totalPrice,
          goodsId:this.cartList.filter(item=>item.checked).map(e=>e.goods_id).join(','),
          openId:localStorage.getItem('openId')
        })
        if(res.data){
          // 跳转页面
          this.$router.push({name:'Order'})
        }
        
      }else{
        console.log("没有选中的商品");
      }
      
    }
  }
}
</script>
<style lang='scss' scoped>
</style>